<template>
  <div style="display: flex">
    <div style="min-width: 15%;max-height: 500px;overflow:auto;border-right: 5px solid #eeeeee">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <el-container>
      <div style="display: flex;flex-direction: column">
        <div style="height: 40px;display: flex;margin-left: 10px">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="请输入会员名称、电话、收货地址"
            style="width: 350px;text-align: center"
            v-model="keyword"
          ></el-input>
          <div>
            <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" :loading="queryClicked"
                       @click="queryClick">查询
            </el-button>
            <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetClick">
              重置
            </el-button>
            <!-- <el-button style="margin-left: 10px" icon="el-icon-delete" type="info" @click="cleanClick">
              清空已选会员
            </el-button> -->
          </div>
        </div>
        <div style="padding-left: 10px">
          <el-table
            :data="memberList"
            border
            stripe
            :height="curHeight"
             ref="table"
            :row-key="getRowKeys"
            @selection-change="handleSelectionChange"
            @row-dblclick="doubleClick"
            style="width: 100%;">
            <!-- <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55">
            </el-table-column> -->
            <el-table-column
              label="注册手机"
              align="left"
              width="120"
              prop="mobile">
            </el-table-column>
            <el-table-column
              label="客户名称"
              
              align="center"
              prop="name"
            >
            </el-table-column>
            <el-table-column
              label="备用电话"
              width="120"
              align="left"
              prop="phone"
            >
            </el-table-column>
            <el-table-column
              label="地址"
              align="center"
              
            >
              <template slot-scope="scope">
            <span>
              {{ scope.row.areaName }}{{scope.row.address}}
            </span>
              </template>
            </el-table-column>

          </el-table>
        </div>

          <el-footer class="el-footerBox">
            <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                        @pagination="loadMember"></pagination>
          </el-footer>
          <!-- <div style="display: flex;justify-content: flex-end;align-items: center">
            <el-button type="primary" @click="addClick">完成</el-button>
          </div> -->


      </div>


    </el-container>

  </div>
</template>

<script>
  import { list } from '@/api/member'
  import Pagination from '@/components/Pagination'
  import {list as memberCategoryList}  from '@/api/memberCategory'
  export default {
    name: 'index',
    data() {
      return {
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        data: [],
        total: 0,
        memberCategoryId:'',
        pageSize: 20,
        pageNum: 1,
        curHeight: null,
        memberList: [],
        chooseData: [],
        keyword: '',
        queryClicked: false

      }
    },
    created() {
      this.loadMember()
      this.loadMemberCategoryList()
    },
    filters: {
      watchVip(val) {
        if (val == 0) {
          return 'vip0'
        } else if (val == 1) {
          return 'vip1'
        } else if (val == 2) {
          return 'vip2'
        } else if (val == 3) {
          return 'vip3'
        } else if (val == 4) {
          return 'vip4'
        } else if (val == 5) {
          return 'vip5'
        }
      }
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    components: { Pagination },
    methods: {
      //切换分页保留选择
      getRowKeys(row) {
        return row.id
      },
      loadMemberCategoryList(){
        memberCategoryList().then(res=>{
          let category={
            id:'',
            name:'所有分类'
          }
          res.data.unshift(category)
          this.data=res.data
        })
      },

      loadMember() {
        let params = new URLSearchParams()
        params.append('memberCategoryId',this.memberCategoryId)
        params.append('pageSize', this.pageSize)
        params.append('pageNum', this.pageNum)
        params.append('keyword', this.keyword)
        list(params).then(res => {
          this.total=res.data.total
          this.memberList = res.data.data
        })
      },
      //双击添加商品
      doubleClick(val) {
        this.$emit('memberDouble', val)
      },
      handleNodeClick(data) {
        this.memberCategoryId = data.id
        this.loadMember()
      },
      //选择商品
      handleSelectionChange(val) {
        this.chooseData = val
      },
      queryClick() {
        this.loadMember()
      },
      cleanClick(){
        this.chooseData=[]
      },
      resetClick() {

        this.keyword = ''
        this.loadMember()
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 380//减去页面上固定高度height
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            this.curHeight = h - 380//减去页面上固定高度height
          })()
        }
      },
      addClick() {
        if (this.chooseData.length>1){
          this.$message({
            message: '每次只能选一个客户',
            type: 'warning'
          });
          return
        }
        this.$emit('addMemberClick', this.chooseData)
        this.$emit('memberTableClose')
      }

    }
  }
</script>

<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
  }
</style>
